<script setup lang="ts">
  const { num, setNum } = useNum()

  defineProps({
    text: {
      type: String,
      default: () => ''
    }
  })
  
  const handler = () => {
    setNum(num.value + 1)
  }
</script>

<template>
  <div class="min-h-screen flex items-center justify-center">
    <NuxtLink :to="`/detail/${num}`">>>></NuxtLink>
    <div @click="handler" class="cursor-default text-center text-9xl focus:bg-red-100">
      {{ capitalize(text) }}
      <span class="text-2xl">{{ num }}</span>
    </div>
  </div>
</template>
